<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    :close-on-click-modal="false"
    :before-close="handleClose"
    width="50%"
  >
    <el-form ref="form" :model="infoForm" label-width="120px" >
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('categoryParentName')">
            <el-select
              v-model="infoForm.categoryName"
              :disabled="isDisable"
              filterable
              @change="getCategoryList">
              <el-option
                v-for="item in parentList"
                :key="item.id"
                :label="item.name"
                :value="item.id"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('categoryName')">
            <el-select v-model="infoForm.ChildCategoryName" :disabled="isDisable" filterable>
              <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item :label="$t('status')">
          <el-switch
            v-model="infoForm.valid"
            :active-value="0"
            :inactive-value="1"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item :label="$t('updateLog')">
          <el-input v-model="infoForm.remark" :rows="2" type="textarea"/>
        </el-form-item>
      </el-row>
    </el-form>
    <span slot="footer">
      <el-button icon="el-icon-circle-close" @click="handleClose">{{
        $t("cancel")
      }}</el-button>
      <el-button v-btnThrottle="doSave" type="primary" icon="el-icon-receiving">{{
        $t("save")
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import programApi from '@/api/testprogram/catalogManagement'
import networkTips from '@/mixins/networkTips'

export default {
  name: '',
  components: {},
  mixins: [networkTips],
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      isDisable: false,
      infoForm: {},
      parentList: [],
      categoryList: []
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    doSave() {
      if (this.infoForm.id) {
        programApi.doUpdate(this.$clearNull(this.infoForm)).then(res => {
          this.netTips(res, this.handleClose, this.handleUpdate)
        })
      } else {
        programApi.doAdd(this.$clearNull(this.infoForm)).then(res => {
          this.netTips(res, this.handleClose, this.handleUpdate)
        })
      }
    },
    // 触发父组件更新
    handleUpdate() {
      this.$emit('initList')
    },
    // 获取分类父名称
    async getParentList() {
      const res = await programApi.getParentList()
      this.parentList = res.data
    },
    // 获取分类子名称
    async getCategoryList() {
      const res = await programApi.getCategoryList({ id: this.infoForm.categoryName })
      this.categoryList = res.data
    },
    // 打开
    openDialog(obj = {}) {
      if (obj.id) {
        this.isDisable = true
      }
      this.dialogFormVisible = true
      this.getParentList()
      this.infoForm = obj
    },
    // 关闭
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    }
  }
}
</script>

<style scoped lang="scss">
// ::v-deep .el-dialog__body {
//   padding: 30px 0;
// }
</style>
